<template>
<div class="list">
  <Content v-bind="foodList">
    <template v-slot:typeList="{list}">
      <ol>
        <li v-for = "item in list" :key="item">{{item}}</li>
      </ol>
    </template>
    </Content>

    <Content v-bind="gameList">
    <template v-slot:typeList="{list}">
      <ul>
        <li v-for = "item in list" :key="item">{{item}}</li>
      </ul>
    </template>
    </Content>
  </div>
</template>

<script>
import Content from "./Components/Content"
export default {
  name:"App",
  components:{
    Content,
  },
  data() {
    return {
       foodList: {
        type: "食物",
        list: ["海鲜", "豆皮", "牛肉"],
      },
      gameList: {
        type: "游戏",
        list: ["DNF", "LOL", "DOTA", "CS"],
      },
    }
  },

}
</script>

<style scoped>
  .list{
    display: flex;
    justify-content: space-between;
  }
</style>